<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .outer{
          width: 300px;
          height: 300px;
          border: solid 1px red;
      }

      .inner{
        width: 200px;
        height: 200px;
        border: solid 1px grey;
      }

  </style>
 

</head>

<body>
  
  <div class="outer" >

     <div class="inner">

     </div>

  </div>


  <script>

    let outer  = document.querySelector(".outer");
    let inner  = document.querySelector(".inner");

    outer.addEventListener('click',function(event){
        console.log("大的别点击了")
    })

    inner.addEventListener('click',function(event){
      console.log("    小的别点击了")

      //阻止事件冒泡
      event.stopPropagation();
    })

  </script>


</body>

</html>